<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="header-content">
        <text class="title">无人机机构加盟申请</text>
        <text class="subtitle">加入我们，共创无人机行业新未来</text>
      </view>
    </view>
    
    <!-- 主要内容区 -->
    <view class="main-content">
      <!-- 加盟优势简介 -->
      <view class="advantages">
        <view class="advantage-item" v-for="(item, index) in advantages" :key="index">
          <view class="advantage-icon">
            <uni-icons :type="item.icon" size="40rpx" color="#36BFFA"></uni-icons>
          </view>
          <view class="advantage-text">
            <text class="advantage-title">{{ item.title }}</text>
            <text class="advantage-desc">{{ item.desc }}</text>
          </view>
        </view>
      </view>
      
      <!-- 申请表单 -->
      <view class="form-container">
        <form @submit="submitForm" @reset="resetForm">
          <!-- 机构信息 -->
          <view class="form-section">
            <text class="section-title">机构基本信息</text>
            
            <view class="form-group">
              <view class="form-label">机构名称</view>
              <view class="form-control">
                <input type="text" v-model="form.orgName" placeholder="请输入机构全称" required />
              </view>
            </view>
            
            <view class="form-group">
              <view class="form-label">机构地址</view>
              <view class="form-control">
                <input type="text" v-model="form.address" placeholder="请输入详细地址" required />
              </view>
            </view>
            
            <view class="form-group">
              <view class="form-label">成立时间</view>
              <view class="form-control">
                <input type="date" v-model="form.establishDate" required />
              </view>
            </view>
            
            <view class="form-group">
              <view class="form-label">机构规模</view>
              <view class="form-control">
                <picker mode="selector" :range="scaleOptions" v-model="form.scaleIndex">
                  <view class="picker-view">{{ scaleOptions[form.scaleIndex] }}</view>
                </picker>
              </view>
            </view>
          </view>
          
          <!-- 联系人信息 -->
          <view class="form-section">
            <text class="section-title">联系人信息</text>
            
            <view class="form-group">
              <view class="form-label">姓名</view>
              <view class="form-control">
                <input type="text" v-model="form.contactName" placeholder="请输入联系人姓名" required />
              </view>
            </view>
            
            <view class="form-group">
              <view class="form-label">职位</view>
              <view class="form-control">
                <input type="text" v-model="form.position" placeholder="请输入职位" required />
              </view>
            </view>
            
            <view class="form-group">
              <view class="form-label">电话</view>
              <view class="form-control">
                <input type="tel" v-model="form.phone" placeholder="请输入联系电话" required />
              </view>
            </view>
            
            <view class="form-group">
              <view class="form-label">邮箱</view>
              <view class="form-control">
                <input type="email" v-model="form.email" placeholder="请输入电子邮箱" required />
              </view>
            </view>
          </view>
          
          <!-- 加盟信息 -->
          <view class="form-section">
            <text class="section-title">加盟意向信息</text>
            
            <view class="form-group">
              <view class="form-label">意向区域</view>
              <view class="form-control">
                <input type="text" v-model="form.intendedArea" placeholder="请输入意向加盟区域" required />
              </view>
            </view>
            
            <view class="form-group">
              <view class="form-label">预计投入</view>
              <view class="form-control">
                <picker mode="selector" :range="investmentOptions" v-model="form.investmentIndex">
                  <view class="picker-view">{{ investmentOptions[form.investmentIndex] }}</view>
                </picker>
              </view>
            </view>
            
            <view class="form-group">
              <view class="form-label">加盟优势</view>
              <view class="form-control">
                <textarea v-model="form.advantages" placeholder="请简述您的加盟优势和资源" rows="4"></textarea>
              </view>
            </view>
            
            <view class="form-group">
              <view class="form-label">其他说明</view>
              <view class="form-control">
                <textarea v-model="form.otherInfo" placeholder="其他需要说明的信息" rows="3"></textarea>
              </view>
            </view>
          </view>
          
          <!-- 表单提交 -->
          <view class="form-actions">
            <button form-type="reset" class="reset-btn">重置</button>
            <button form-type="submit" class="submit-btn" :loading="submitting">提交申请</button>
          </view>
        </form>
      </view>
      
      <!-- 加盟流程 -->
      <view class="process-section">
        <text class="process-title">加盟流程</text>
        <view class="process-steps">
          <view class="step-item" v-for="(step, index) in processSteps" :key="index">
            <view class="step-number">{{ index + 1 }}</view>
            <view class="step-content">
              <text class="step-title">{{ step.title }}</text>
              <text class="step-desc">{{ step.desc }}</text>
            </view>
            <view class="step-line" v-if="index < processSteps.length - 1"></view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部 -->
    <view class="footer">
      <text class="copyright">© 2023 无人机加盟总部 版权所有</text>
    </view>
    
    <!-- 提交成功弹窗 -->
    <uni-popup ref="successPopup" type="center">
      <view class="popup-content">
        <view class="popup-icon">
          <uni-icons type="success" size="80rpx" color="#00B42A"></uni-icons>
        </view>
        <text class="popup-title">申请提交成功</text>
        <text class="popup-desc">我们将在3个工作日内与您联系，请保持电话畅通</text>
        <button class="popup-btn" @click="closePopup">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据
      form: {
        orgName: '',
        address: '',
        establishDate: '',
        scaleIndex: 0,
        contactName: '',
        position: '',
        phone: '',
        email: '',
        intendedArea: '',
        investmentIndex: 0,
        advantages: '',
        otherInfo: ''
      },
      // 选择器选项
      scaleOptions: ['10人以下', '10-50人', '50-100人', '100人以上'],
      investmentOptions: ['10万以下', '10-50万', '50-100万', '100-500万', '500万以上'],
      // 加盟优势
      advantages: [
        {
          icon: 'star',
          title: '品牌支持',
          desc: '提供统一品牌形象和市场推广支持'
        },
        {
          icon: 'book',
          title: '技术培训',
          desc: '专业的无人机操作和维护培训'
        },
        {
          icon: 'truck',
          title: '设备供应',
          desc: '优惠的无人机设备采购渠道'
        },
        {
          icon: 'bar-chart',
          title: '市场指导',
          desc: '提供市场分析和业务拓展指导'
        }
      ],
      // 加盟流程
      processSteps: [
        {
          title: '提交申请',
          desc: '填写并提交加盟申请表'
        },
        {
          title: '资质审核',
          desc: '总部审核申请资料和资质'
        },
        {
          title: '面谈考察',
          desc: '双方沟通并实地考察'
        },
        {
          title: '签订合同',
          desc: '确认合作并签订加盟合同'
        },
        {
          title: '培训筹备',
          desc: '参加培训并进行开业筹备'
        }
      ],
      // 提交状态
      submitting: false
    };
  },
  methods: {
    // 提交表单
    submitForm() {
      // 简单验证
      if (!this.form.orgName || !this.form.address || !this.form.establishDate) {
        uni.showToast({
          title: '请完善机构信息',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.contactName || !this.form.phone || !this.form.email) {
        uni.showToast({
          title: '请完善联系人信息',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.intendedArea) {
        uni.showToast({
          title: '请填写意向区域',
          icon: 'none'
        });
        return;
      }
      
      // 模拟提交
      this.submitting = true;
      setTimeout(() => {
        this.submitting = false;
        // 显示成功弹窗
        this.$refs.successPopup.open();
        // 重置表单
        this.resetForm();
      }, 1500);
    },
    // 重置表单
    resetForm() {
      this.form = {
        orgName: '',
        address: '',
        establishDate: '',
        scaleIndex: 0,
        contactName: '',
        position: '',
        phone: '',
        email: '',
        intendedArea: '',
        investmentIndex: 0,
        advantages: '',
        otherInfo: ''
      };
    },
    // 关闭弹窗
    closePopup() {
      this.$refs.successPopup.close();
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 头部样式 */
.header {
  background: linear-gradient(135deg, #1E88E5 0%, #36BFFA 100%);
  padding: 60rpx 30rpx 40rpx;
  position: relative;
  overflow: hidden;
}

.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="rgba(255,255,255,0.05)"/></svg>');
  background-repeat: repeat;
  opacity: 0.5;
}

.header-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.title {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
  display: block;
  margin-bottom: 15rpx;
}

.subtitle {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.85);
}

/* 主要内容区 */
.main-content {
  flex: 1;
  padding: 30rpx;
  box-sizing: border-box;
}

/* 加盟优势 */
.advantages {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.advantages:hover {
  transform: translateY(-5rpx);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
}

.advantage-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 25rpx;
  transition: transform 0.2s ease;
}

.advantage-item:last-child {
  margin-bottom: 0;
}

.advantage-item:hover {
  transform: translateX(10rpx);
}

.advantage-icon {
  width: 50rpx;
  height: 50rpx;
  background-color: rgba(54, 191, 250, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.advantage-text {
  flex: 1;
}

.advantage-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: 600;
  display: block;
  margin-bottom: 5rpx;
}

.advantage-desc {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.5;
}

/* 表单容器 */
.form-container {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 表单区块 */
.form-section {
  margin-bottom: 30rpx;
}

.form-section:last-child {
  margin-bottom: 0;
}

.section-title {
  font-size: 30rpx;
  color: #333333;
  font-weight: 600;
  display: block;
  margin-bottom: 25rpx;
  padding-left: 10rpx;
  border-left: 6rpx solid #36BFFA;
}

/* 表单组 */
.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
}

.form-label {
  width: 180rpx;
  font-size: 26rpx;
  color: #333333;
  padding-right: 20rpx;
  box-sizing: border-box;
}

.form-control {
  flex: 1;
}

input, textarea, .picker-view {
  width: 100%;
  padding: 20rpx 25rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #333333;
  box-sizing: border-box;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

input:focus, textarea:focus {
  border-color: #36BFFA;
  outline: none;
  box-shadow: 0 0 0 4rpx rgba(54, 191, 250, 0.2);
}

textarea {
  min-height: 140rpx;
  resize: none;
  line-height: 1.6;
}

.picker-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.picker-view::after {
  content: '';
  width: 16rpx;
  height: 16rpx;
  border-top: 2rpx solid #999;
  border-right: 2rpx solid #999;
  transform: rotate(45deg);
}

/* 表单按钮 */
.form-actions {
  display: flex;
  justify-content: center;
  gap: 30rpx;
  margin-top: 40rpx;
}

.reset-btn, .submit-btn {
  width: 240rpx;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #666666;
  border: none;
}

.reset-btn:active {
  background-color: #e8e8e8;
  transform: scale(0.98);
}

.submit-btn {
  background-color: #36BFFA;
  color: #ffffff;
  border: none;
  position: relative;
  overflow: hidden;
}

.submit-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: all 0.6s ease;
}

.submit-btn:active {
  background-color: #1E88E5;
  transform: scale(0.98);
}

.submit-btn:hover::after {
  left: 100%;
}

/* 加盟流程 */
.process-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.process-title {
  font-size: 30rpx;
  color: #333333;
  font-weight: 600;
  display: block;
  margin-bottom: 30rpx;
  text-align: center;
}

.process-steps {
  display: flex;
  flex-direction: column;
}

.step-item {
  display: flex;
  position: relative;
  padding-bottom: 30rpx;
  transition: transform 0.2s ease;
}

.step-item:hover {
  transform: translateX(10rpx);
}

.step-number {
  width: 50rpx;
  height: 50rpx;
  background-color: #36BFFA;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  font-weight: bold;
  margin-right: 20rpx;
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}

.step-item:hover .step-number {
  background-color: #1E88E5;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 26rpx;
  color: #333333;
  font-weight: 600;
  display: block;
  margin-bottom: 5rpx;
}

.step-desc {
  font-size: 24rpx;
  color: #666666;
}

.step-line {
  position: absolute;
  left: 25rpx;
  top: 50rpx;
  bottom: 0;
  width: 2rpx;
  background-color: #e5e5e5;
}

/* 底部样式 */
.footer {
  padding: 30rpx;
  text-align: center;
  background-color: #ffffff;
}

.copyright {
  font-size: 24rpx;
  color: #999999;
}

/* 弹窗样式 */
.popup-content {
  width: 560rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 50rpx 30rpx;
  text-align: center;
  animation: popupIn 0.3s ease-out;
}

@keyframes popupIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.popup-icon {
  margin-bottom: 30rpx;
}

.popup-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 600;
  display: block;
  margin-bottom: 15rpx;
}

.popup-desc {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 40rpx;
  display: block;
}

.popup-btn {
  width: 300rpx;
  height: 80rpx;
  background-color: #36BFFA;
  color: #ffffff;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
  transition: all 0.3s ease;
}

.popup-btn:active {
  background-color: #1E88E5;
  transform: scale(0.98);
}
</style>
